<template>
  <button
    class="ui-btn"
    :class="[type ? `is-${type}` : '',size ? `is-${size}` : '' ,loading ? `is-loading` : '' , inline ? `is-inline` : '', disabled ? `is-disabled` : '',plain ? `is-plain` : '',text ? `is-text` : '',square ? `is-square` : '',circle ? `is-circle` : '', ]"
    hover-class="is-active"
    :form-type="formType"
    :open-type="bindOpenType"
    :scope="alipayScope"
    @tap="handleClick"
    @getuserinfo="bindGetuserinfo"
    @getphonenumber="bindGetphonenumber"
    @getAuthorize="bindGetuserinfo"
    @share="bindShare"
  >
    <!-- 按钮是否是加载中状态.. 加载中移除初始状态 -->
    <block v-if="loading">
      <uiLoading :type="loadingType" :size="loadingSize" class="ui-btn--loading"></uiLoading>
      <view v-if="loadingText" class="ui-btn--loading-text">{{ loadingText }}</view>
    </block>
    <block v-else>
      <uiIcon
        class="ui-icon ui-btn--icon"
        type="ui-icon"
        :name="icon"
        :size="loadingSize"
        v-if="icon"
      ></uiIcon>
      <slot></slot>
    </block>
  </button>
</template>

<script>
import uiIcon from "@/components/base/icon/index.vue";
import uiLoading from "@/components/base/loading/index.vue";
import routeMixin from "./route";
export default {
  name: "uiButton",
  components: { uiIcon, uiLoading },
  externalClasses: ["ui-btn"],
  mixins: [routeMixin],
  props: {
    // primary, warning, default,
    type: {
      type: String,
      default: ""
    },
    // large, small
    size: {
      type: String,
      default: ""
    },
    // 是否是行内元素
    inline: {
      type: Boolean,
      default: false
    },
    // 是否添加圆角
    square: {
      type: Boolean,
      default: false
    },
    // circle
    circle: {
      type: Boolean,
      default: false
    },
    // 朴素按钮
    plain: {
      type: Boolean,
      default: false
    },
    // 朴素按钮
    text: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },

    icon: {
      type: String,
      default: ""
    },
    // 加载中
    loading: {
      type: Boolean,
      default: false
    },
    // 加载中
    loadingType: {
      type: String,
      default: "circular"
    },
    loadingText: {
      type: String,
      default: "加载中..."
    },
    openType: {
      type: String,
      default: ""
    },

    formType: {
      type: String,
      default: ""
    },

    hidden: {
      type: Boolean,
      default: false
    },
    bottom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      alipayScope: ""
    };
  },
  computed: {
    loadingSize() {
      let loadingSize = 36;
      switch (this.size) {
        case "large":
          loadingSize = 42;
          break;
        case "small":
          loadingSize = 32;
          break;
        case "mini":
          loadingSize = 32;
          break;

        default:
          loadingSize = 36;
          break;
      }
      return loadingSize;
    },
    bindOpenType() {
      if (this.openType === "share") {
        return "share";
      }
      // 获取用户的手机号码
      if (this.openType === "getPhoneNumber") {
        // #ifdef MP-ALIPAY
        this.alipayScope = "phoneNumber";
        return "getAuthorize";
        // #endif
        // #ifdef MP-WEIXIN
        return "getPhoneNumber";
        // #endif
      }

      // 获取用户的手机号码
      if (this.openType === "getUserInfo") {
        // #ifdef MP-ALIPAY
        this.alipayScope = "userInfo";
        return "getAuthorize";
        // #endif
        // #ifdef MP-WEIXIN
        return "getUserInfo";
        // #endif
      }

      return "";
    }
  },
  methods: {
    handleClick() {
      if (this.disabled) {
        return false;
      }
      this.$emit("click", {});
      if (this.url) {
        this.route({
          url: this.url,
          replace: this.replace
        });
      }
    },
    bindGetuserinfo(e) {
      // #ifndef MP-ALIPAY
      console.log(e);
      this.$emit("getuserinfo", e);
      // #endif

      // #ifdef MP-ALIPAY
      if (this.alipayScope === "userInfo") {
        my.getOpenUserInfo({
          success: res => {
            console.log("getOpenUserInfo::", res);
          },
          fail: err => {
            console.log(err);
            console.log("getOpenUserInfo_fail");
          }
        });
      }
      if (this.alipayScope === "phoneNumber") {
        my.getPhoneNumber({
          success: res => {
            console.log("getPhoneNumber::", res);
          },
          fail: err => {
            console.log(err);
            console.log("getPhoneNumber_fail");
          }
        });
      }
      // #endif
    },
    bindGetPhoneNumber(e) {
      // #ifndef MP-ALIPAY
      console.log(e);
      this.$emit("getphonenumber", e);
      // #endif

      // #ifdef MP-ALIPAY
      my.getPhoneNumber({
        success: res => {
          console.log("getPhoneNumber::", res);
        },
        fail: err => {
          console.log(err);
          console.log("getPhoneNumber_fail");
        }
      });
      // #endif
    },
    /**
     * 触发用户转发
     */
    bindShare(e) {
      this.$emit("share", e);
    }
  }
};
</script>

<style lang="scss" src="@/scss/components/button.scss">
</style>